<!--
 * @Author: ylyu
 * @Date: 2024-02-22 20:02:00
 * @LastEditors: ylyu
 * @LastEditTime: 2024-02-22 20:38:38
 * @Description: 
-->
<script setup>
import { inject } from 'vue'
const { setIsShow } = inject('dialog-visible')
const handleClick = () => {
  setIsShow(true)
}
</script>

<template>
  <div class="search-wrapper">
    <button @click="handleClick">+</button>
    <input class="input" type="text" placeholder="please enter keywords..." />
  </div>
</template>

<style scoped lang="css">
.search-wrapper {
  width: 100%;
  height: 60px;
  background: #d3d3d3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
}
input {
  flex: 1;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  outline: none;
  box-sizing: border-box;
}
</style>
